<template>
	<div>
		<el-button type="primary" @click.stop="add()">添加人员类型</el-button>
		<el-table :data="tableData" stripe style="width: 100%;margin-top: 18px;">
			<el-table-column prop="name" label="人员类型" align='center'>
			</el-table-column>
			<el-table-column prop="status_text" label="状态">
			</el-table-column>
			<el-table-column label="状态操作" align='center'>
				<template slot-scope="scope" v-if="scope.row.id!=1&&scope.row.id!=2">
					<el-button v-if="scope.row.status=='hidden'" type="success" @click="qiehuan(scope.row.id)">开启
					</el-button>
					<el-button v-if="scope.row.status=='normal'" type="danger" @click="qiehuan(scope.row.id)">停用
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" align='center'>
				<template slot-scope="scope">
					<el-button type="primary" v-if="scope.row.id!=1" @click.stop="edit(scope.row)">权限分配</el-button>
					<el-button type="primary" v-if="scope.row.id!=1&&scope.row.id!=2" @click.stop="del(scope.row.id)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="margin-top: 18px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="form.id?'权限编辑':'添加人员类型'" :visible.sync="dialogVisible" width="36%">
			<span>
				<el-form ref="form" :model="form" label-width="80px" :inline="true">
					<el-form-item label="类型名称">
						<el-input :disabled="form.id==2?true:false" v-model="form.name" clearable></el-input>
					</el-form-item>
				</el-form>
				<el-scrollbar style="height: 50vh;" wrapStyle="overflow-x: hidden;">
					<el-tree ref="tree" :data="form.admin_rules" :props="{label: 'title'}" node-key="id"
						:default-expand-all="true" show-checkbox>
						<span slot-scope="{ data }">
							<i :class="data.icon"></i>
							<span> {{ data.title }}</span>
						</span>
					</el-tree>
				</el-scrollbar>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				quanxianlist: [],
				tableData: [],
				page: 1,
				size: 10,
				total: 0,
				dialogVisible: false,
				form: {},
			}
		},
		mounted() {
			this.getlist();
			this.getquanxianlist();
		},
		methods: {
			//获取权限列表
			getquanxianlist() {
				this.$http.get('/back/auth/group/roletree').then((res) => {
					this.quanxianlist = this.$util.toTreeData(res.data.data, 'id', 'pid');
				});
			},
			//获取组别列表
			getlist() {
				this.$http.get('/back/auth/group/index?page=' + this.page).then((res) => {
					this.tableData = res.data.data.data;
					this.total = res.data.data.total;
				});
			},
			//切换状态
			qiehuan(id) {
				this.$http.post('/back/auth/group/status', {
					id: id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist()
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
			//添加
			add() {
				this.form = {};
				this.form.admin_rules = [...this.quanxianlist];
				this.dialogVisible = true;
			},
			//编辑
			edit(row) {
				this.form = row;
				this.dialogVisible = true;
			},
			//提交
			submit() {
				this.$http.post('/back/auth/group/edit', this.form).then((res) => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getlist();
						this.dialogVisible = false;
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getlist();
			},
		}
	}
</script>

<style>
</style>
